<!-- 新增管理员弹框 -->
<template>
    <a-drawer
      title="新增管理员"
      :width="500"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form :model="form" :rules="rules" layout="vertical" ref="formRef">
        <a-form-item label="身份" name="role">
          <a-select placeholder="请选择其身份" v-model:value="form.role">
            <a-select-option :value="1">超级管理员</a-select-option>
            <a-select-option :value="2">普通管理员</a-select-option>
          </a-select>
        </a-form-item>
  
        <a-form-item label="用户名" name="username">
          <a-input
            v-model:value="form.username"
            placeholder="请输入该管理员的用户名"
            autocomplete="off"
          />
        </a-form-item>
  
        <a-form-item label="姓名" name="name">
          <a-input
            v-model:value="form.name"
            placeholder="请输入该管理员的姓名"
            autocomplete="off"
          />
        </a-form-item>
  
        <a-form-item label="密码" name="password">
          <a-input
            v-model:value="form.password"
            placeholder="若为空，则默认为【123456】"
            autocomplete="off"
          />
        </a-form-item>
      </a-form>
      <div>
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="plusAdmin">添加</a-button>
      </div>
    </a-drawer>
  </template>
  
  <script lang="ts">
  import { ValidateErrorEntity } from "ant-design-vue/es/form/interface";
  import { defineComponent, toRaw, ref } from "vue";
  import {post } from "../../../utils/request/request";
  import { message } from "ant-design-vue";
  
  interface FormState {
      username: string;
      name: string;
      password: string;
      role: number;
  }
  
  export default defineComponent({
    setup(props, context) {
      const formRef = ref();
      const form = ref<FormState>({
        username: "",
        name: "",
        password: "",
        role: 2,
      });
  
      const rules = {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 8, message: "长度为3-8个字", trigger: "blur" },
        ],
        password: [{ required: false, message: "请设置密码", trigger: "blur" }],
        roleValue: [
          { required: true, message: "请选择用户身份", trigger: "blur" },
        ],
      };
  
      const visible = ref<boolean>(false);
  
      const showDrawer = () => {
        visible.value = true;
      };
  
      const postData = async () => {
        const token: string = localStorage.getItem("token") as string;
        form.value.password = form.value.password ? form.value.password : "123456";
        console.log(form.value)
        const res: any = await post(
          "/admin/api/v1/admin",
          toRaw(form.value),
          token
        );
        console.log(res);
        if (res?.status_code === 0) {
          message.success("添加成功", 3);
          context.emit("getData");
          visible.value = false;
        } else {
          message.error(res?.status_msg, 3);
        }
      };
  
      const plusAdmin = () => {
        formRef.value
          .validate()
          .then(() => {
            postData();
            formRef.value.resetFields();
          })
          .catch((error: ValidateErrorEntity<FormState>) => {});
      };
  
      const onClose = () => {
        visible.value = false;
      };
      return {
        formRef,
        form,
        rules,
        visible,
        showDrawer,
        plusAdmin,
        onClose,
      };
    },
  });
  </script>
  
  